import { createRouter, createWebHashHistory } from 'vue-router'

/**
 * 路由懒加载:
 * 1. 没有懒加载: 所有页面代码都会被下载
 * 2. 懒加载: 访问小兔鲜儿首页, 下载页面 js + css 等代码并执行
 */

// 1. 导入页面
// 父页面
import Layout from '@/views/layout'

// 子页面: 首页
// import Home from '@/views/home'
const Home = () => import('@/views/home')

// 分类页
// import Category from '@/views/category'
const Category = () => import('@/views/category')

// 商品详情
// import Good from '@/views/good'
const Good = () => import('@/views/good')

// 登录
const Login = () => import('@/views/login')

// 购物车
const Cart = () => import('@/views/cart')

// 创建订单
const Order = () => import('@/views/order')

// 支付
const Pay = () => import('@/views/pay')

// 支付结果页
const PayResult = () => import('@/views/pay/result.vue')

// 2. 配置路由
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      /**
       * 默认跟随父页面一块渲染显示:
       * 1. path 地址设置为空
       * 2. path 地址跟父一样
       */
      {
        path: '/', // 首页
        component: Home
      },
      {
        path: '/category/:id', // 分类
        component: Category
      },
      {
        path: '/good/:id', // 商品详情
        component: Good
      },
      {
        path: '/cart', // 购物车
        component: Cart
      },
      {
        path: '/order', // 订单
        component: Order
      },
      {
        path: '/pay', // 支付
        component: Pay
      },
      {
        path: '/pay/callback', // 支付结果页
        component: PayResult
      }
    ]
  },

  {
    path: '/login', // 登录
    component: Login
  }
]

// vue2 => new Router()
// vue3 => createRouter()

/**
 * 路由模式修改:
 * vue2 => mode: 'hash | history'
 * vue3 => history: createWebHashHistory() | createWebHistory()
 */
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // vue2: scrollBehavior: () => ({ y: 0 }),
  // vue3: 每次跳页面把滚动条距离顶部的值, 重置为0
  scrollBehavior () {
    return { top: 0 }
  }
})

export default router
